<template>
    <div class="home_box">
        <div class="home_left_boxs">
            <div style="cursor: pointer;"> <router-link to="/knowledge">知识小测</router-link>/{{knowledgeLists.title}} </div>
            <a-card :title="knowledgeLists.title">
                <a-image :src='knowledgeLists.cover || bg' style="width: 100%;height: 360px;" :fallback="bg" />
                <h2>{{ knowledgeLists.title }}</h2>
                <p>{{ knowledgeLists.summary }}</p>
                <p>
                    {{ knowledgeLists.views }}次阅读{{ new Date(knowledgeLists.publishAt).toLocaleString() }}
                </p>
                <a-button disabled>开始阅读</a-button>
                <p>敬请期待</p>
            </a-card>
        </div>  
        <div class="home_right_boxs">
            <a-card title="其他知识小测">
                <div v-for="item in arrs" :key="item.id" @click="()=>handeltodetails(item.id)">
                    <component :is="Articleitem" :item="item" :id="item.id"></component>
                </div>
            </a-card>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import bg from "../assets/atm.jpeg"
import { ref ,watch} from "vue";
import { useRoute,useRouter } from "vue-router"
import { storeToRefs } from "pinia";
import { useknowledge } from "../store/knowledge";
import { useHomes } from "../store/home"
import Articleitem from "../components/articleitem.vue"
let homes = useHomes()
let knowleages = useknowledge();
let { knowledgeLists } = storeToRefs(knowleages);
let {knowleageList} = storeToRefs(homes)
let route = useRoute();
let router = useRouter()
knowleages.getknowledge(route.params.id)
homes.getknowleage()
let arrs = ref([] as any);
watch(knowleageList,(newval)=>{
   arrs.value =  [...newval].filter((v:any)=>v.id!=route.params.id)
})
watch(()=>route.params.id,()=>{
    location.reload()
})
//跳转详情
let handeltodetails = (id:string) =>{
    router.push("/knowdetail/"+id)
}
</script>
  
<style lang="scss">

.home_box {
    height: 100vh;
    margin: 0 auto;
    overflow: auto;
    display: flex;
    justify-content: center;
    background: #f0f2f5;
    .home_left_boxs {
        flex: 1;
        min-width: 500px;
        max-width: 900px;
        margin-right: 15px;
        background: none;
    }

    .home_right_boxs {
        width: 320px;
        height: 100vh;
        background: none;
        position: sticky;
        top: 0;
        right: 0;
    }

    &::-webkit-scrollbar {
        display: none;
    }
}
</style>